<template>
  <div class='t-page-big' :style="cursorStyle">
    <div class="left-box">
      <img class="logo" src="../../assets/imgs/preview/logo.png" />
      <div class="left-main-box">
        <div><img @click.stop="goHome" class="item-hover" src="../../assets/imgs/preview/homeButton.png" /></div>
        <div><img @click.stop="doFullScreen" class="item-hover" src="../../assets/imgs/preview/fullScreenButton.png" /></div>
        <div><img @click.stop="goBack" class="item-hover" src="../../assets/imgs/preview/backButton.png" /></div>
      </div>
      <img class="version" src="../../assets/imgs/preview/version.png" />
    </div>
    <div class="right-box">
      <img @click="doClose" class="close-button" src="../../assets/imgs/preview/closeButton.png" />

      <div class='canvas-box'>
        <div id='canvaspd' :style="{width: init.width + 'px', height: init.height + 'px'}">
          <canvas id="previewCanvas" :width="init.width" :height="init.height"></canvas>
        </div>
      </div>
      <!-- <div class="book-box">
      </div> -->

      <div class="handle-box">
        <div :class="['handle-item', currentButton==='isShowSelect'?'activity':'']" @click.stop="doHandleBtn('isShowSelect')">
          <span class="handle-item-hover">画笔</span>
          <img src="../../assets/imgs/preview/penButton.png" />
        </div>
        <div :class="['handle-item', currentButton==='isRubber'?'activity':'']" @click.stop="doHandleBtn('isRubber')">
          <span class="handle-item-hover">橡皮檫</span>
          <img src="../../assets/imgs/preview/rubberButton.png" />
        </div>
        <div :class="['handle-item']" @click.stop="doHandleBtn('isNarrow')">
          <span class="handle-item-hover">缩小</span>
          <img src="../../assets/imgs/preview/narrowButton.png" />
        </div>
        <div :class="['handle-item']" @click.stop="doHandleBtn('isEnlarge')">
          <span class="handle-item-hover">放大</span>
          <img src="../../assets/imgs/preview/enlargeButton.png" />
        </div>
        <div :class="['handle-item', currentButton==='isDrag'?'activity':'']" @click.stop="doHandleBtn('isDrag')">
          <span class="handle-item-hover">移动</span>
          <img src="../../assets/imgs/preview/dragButton.png" />
        </div>
        <div :class="['handle-item', currentButton==='isStopAll'?'activity':'']" @click.stop="doHandleBtn('isStopAll')">
          <span class="handle-item-hover">鼠标</span>
          <img src="../../assets/imgs/preview/mouseButton.png" />
        </div>
        <div :class="['handle-item']" @click.stop="doPrevPage">
          <span class="handle-item-hover">上页</span>
          <img src="../../assets/imgs/preview/prevButton.png" />
        </div>
        <div class="handle-item page-content">
          <span>{{showPageText}}</span>
        </div>
        <div :class="['handle-item']" @click.stop="doNextPage">
          <span class="handle-item-hover">下页</span>
          <img src="../../assets/imgs/preview/nextButton.png" />
        </div>
        <div :class="['handle-item', currentButton==='isShowChartBg'?'activity':'']" @click.stop="doHandleBtn('isShowChartBg')">
          <span class="handle-item-hover">图形</span>
          <img src="../../assets/imgs/preview/chartButton.png" />
        </div>
        <div :class="['handle-item', currentButton==='isShowDiceBg'?'activity':'']" @click.stop="doHandleBtn('isShowDiceBg')">
          <span class="handle-item-hover">点数</span>
          <img src="../../assets/imgs/preview/diceButton.png" />
        </div>
        <div :class="['handle-item', currentButton==='isShowNumberBg'?'activity':'']" @click.stop="doHandleBtn('isShowNumberBg')">
          <span class="handle-item-hover">数字</span>
          <img src="../../assets/imgs/preview/numberButton.png" />
        </div>
      </div>
      <!-- <div class=""></div> -->
      <div :class="['dialog-item', 'chart', chartBg==1?'chart1':'chart2' ]" v-if="isShowChartBg">
        <div :class="['chart-item', item===currentBgButton?'chart-item-activity':'']" v-for="item in 14" :key="item" @click="doChartItem(item,chartBg)"></div>
        <div class="next-or-chart" @click="doChangeBg"></div>
        <img class='c-close' src='../../assets/imgs/home/icon_close.png' @click.stop="doHandleBtn('isShowChartBg')" />
      </div>
      <div class="dialog-item dice" v-if="isShowDiceBg">
        <div :class="['dice-item', item===currentBgButton?'dice-item-activity':'']" v-for="item in 9" :key="item" @click="doDiceItem(item)"></div>
        <img class='c-close' src='../../assets/imgs/home/icon_close.png' @click.stop="doHandleBtn('isShowDiceBg')" />
      </div>
      <div class="dialog-item number" v-if="isShowNumberBg">
        <div :class="['number-item', item===currentBgButton?'number-item-activity':'']" v-for="item in 10" :key="item" @click="doNumberItem(item)"></div>
        <img class='c-close' src='../../assets/imgs/home/icon_close.png' @click.stop="doHandleBtn('isShowNumberBg')" />
      </div>
    </div>
    <ColorSelect v-if='isShowSelect' v-model="color" @change="colorChange" @close='isShowSelect=false'></ColorSelect>
  </div>
</template>

<script>
import { ipcRenderer } from 'electron'
// import { getCase } from './config'
import ColorSelect from './components/ColorSelect'
import cavansJs from '../../mixins/cavans.js'
// import CanPreview from './components/CanPreview'
export default {
  name: 'bigPage',
  mixins: [cavansJs],
  data () {
    return {
      currentLeftType: 'subject', // subject(题目) answer(答案)
      currentRightType: 'subject', // subject(题目) answer(答案)
      pages: [],
      color: 'rgba(0,162,238,1)',
      url: '',
      showPageText: '',
      bookId: 0,
      currentPagesNum: 0,
      // currentRouteName: '',
      pagesLength: 0,
      currentButton: '',
      isShowSelect: false,
      isShowChartBg: false,
      isShowDiceBg: false,
      isShowNumberBg: false,
      isShowPreview: false,
      isEnlarge: false,
      chartBg: 1,
      multiple: 1,
      bg: null,
      bgPosition: {
        x: 0,
        y: 0
      },
      bigImg: { // 被放在的图片的宽高
        width: 0,
        height: 0
      },
      drag: false,
      isStartMove: false,
      currentBgButton: '',
      zoomTime: 1
    }
  },
  components: {
    // Course: require('./components/Course').default
    ColorSelect,
    // CanPreview
  },
  computed: {
    cursorStyle: function () {
      let url = ''
      switch (this.currentButton) {
        case 'isShowSelect':
          url = 'pen'
          break
        case 'isRubber':
          url = 'rubberButton'
          break
        case 'isNarrow':
          url = ''
          break
        case 'isEnlarge':
          url = ''
          break
        case 'isDrag':
          url = 'dragButton'
          break
        case 'isStopAll':
          url = 'mouseButton'
          break
        case 'isShowChartBg':
          url = 'chartButton'
          break
        case 'isShowDiceBg':
          url = 'diceButton'
          break
        case 'isShowNumberBg':
          url = 'numberButton'
          break
      }
      if (url) {
        return `cursor: url('${require(`../../assets/imgs/ico/${url}.ico`)}') ${url == 'pen' ? '16 32' : '16 16'}, auto`
      } else {
        return ''
      }
    },
    lineWidth () {
      return this.lineSize * this.zoom * 2
    }
  },
  created () {
    this.currentBgButton = ''
  },
  mounted () {
    console.log('this.$route-------------->', this.$route.query)
    let { url, currentPagesNum, bookId, showPageText, pagesLength } = this.$route.query
    this.bookId = bookId// 当前是第几本书
    this.currentPagesNum = currentPagesNum * 1// 当前显示第几页
    this.pagesLength = pagesLength * 1// 书本总页数
    this.showPageText = decodeURIComponent(showPageText)// 页码文案
    this.url = decodeURIComponent(url) // 放大图片
    this.$nextTick(() => {
      this.initCanvas()
    })

  },
  beforeDestroy () {
    this.stopAll()
    if (this.canvas) {
      this.canvas.clear()
      this.canvas.dispose()
      this.canvas = null
    }
    if (this.resizeFunc) {
      window.removeEventListener('resize', this.throttle(this.resizeFunc, 400))
    }
    // try {
    //   localStorage.removeItem('cavjson')
    // } catch (error) {
    //   console.log('remove-->', error)
    // }
  },
  methods: {
    // 换色字背景
    doChangeBg () {
      this.currentBgButton = ''
      this.chartBg = this.chartBg == 1 ? 2 : 1
    },
    // 画图形
    doChartItem (item, chartBg) {
      this.currentBgButton = item
      this.optChart(item, chartBg)
    },
    // 画色子
    doDiceItem (item) {
      this.currentBgButton = item
      this.optHandler('point', item)
    },
    //  画数字
    doNumberItem (item) {
      this.currentBgButton = item
      this.optHandler('num', item)
    },
    setZoom (zoom = 1) {
      if (!this.canvas) {
        return
      }
      let eleHeight = window.global.innerHeight * 0.9,
        eleWidth = window.global.innerWidth * 0.885,
        cHeight = this.canvas.height,
        cWidth = this.canvas.width;

      // let height = eleHeight > cHeight ? eleHeight : cHeight;
      // let width = eleWidth > cWidth ? eleWidth : cWidth;
      //横版
      let width = eleWidth;
      let height = eleHeight;
      let wz = (width / this.init.width)
      let hz = (eleHeight / this.init.height)
      zoom = wz > hz ? hz : wz
      zoom = this.multiple * zoom

      this.canvas.setZoom(zoom);
      this.canvas.setWidth(width);
      this.canvas.setHeight(height);

      this.canvasTo = {
        x: (this.canvasTo.x / this.zoom) * zoom,
        y: (this.canvasTo.y / this.zoom) * zoom,
        zoom: zoom
      }

      this.zoom = zoom;
      this.canvas.renderAll();
    },
    initCanvas () {
      if (!this.canvas) {
        this.fabricUpdateOp()
        this.canvas = new fabric.Canvas('previewCanvas', {
          isDrawingMode: false,
          skipTargetFind: true,
          selectable: false,
          selection: false,
          defaultCursor: '',
          // hoverCursor: '',
          // moveCursor: '',
          freeDrawingCursor: '',
          rotationCursor: ''
        })
        this.reRenderCanvas()
        this.renderBackground(this.url)
        this.disSelectAll()
        this.resizeFunc = () => {
          console.log('进来了')
          this.$nextTick(()=>{
            this.setZoom();
          })
        }
        window.addEventListener('resize', this.throttle(this.resizeFunc, 400))
        // ipcRenderer.on('master-resize', this.resizeFunc)
      }
    },
    renderBackground (url) {
      if (url) {
        fabric.Image.fromURL(require(`../../assets/imgs/${url}`), (img) => {
          img.set({
            // 通过scale来设置图片大小，这里设置和画布一样大
            scaleX: this.init.width / img.width,
            scaleY: this.init.height / img.height,
          });
          // 设置背景
          this.canvas.setBackgroundImage(img, this.canvas.renderAll.bind(this.canvas), {
            erasable: false,
            // left: window.global.innerWidth * 0.095,
            // top: window.global.innerHeight * 0.02
          });
          this.canvas.renderAll();
          setTimeout(() => {
            this.multiple = 1.5
            this.setZoom();
          }, 200);
        });

        // this.canvas.setBackgroundImage(require(`../../assets/imgs/${url}`), this.canvas.renderAll.bind(this.canvas), {
        //   // left: window.global.innerWidth * 0.11,
        //   // top: window.global.innerHeight * 0.025,
        //   width: 865,
        //   height: 608,
        //   erasable: false,
        //   repeat: 'no-repeat',
        //   // Needed to position backgroundImage at 0/0
        //   originX: 'left',
        //   originY: 'top',
        //   crossOrigin: 'anonymous'
        // });

        // var zoomPoint = new fabric.Point(this.canvas.width / 2 , this.canvas.height / 2);
        // //开始缩放
        // canvas.zoomToPoint(zoomPoint, 1);
      }
    },
    doEnlargeDom (val, src) {
      this.multiple = this.multiple + 0.05
      // var delta = new fabric.Point(0, 0);
      // this.canvas.relativePan(delta);
      this.setZoom();
      this.zoomTime = this.zoomTime + 1
      // this.canvasTo = {
      //   x: 0,
      //   y: 0,
      //   zoom: this.zoom
      // }
      // this.initCanvas()
    },
    doNarrowDom () {
      if (this.zoomTime < 1) {
        // this.$router.go(-1)
        this.goBack()
        return
      }
      this.multiple = this.multiple - 0.05
      this.setZoom();
      this.zoomTime = this.zoomTime - 1
      // var delta = new fabric.Point(0, 0);
      // this.canvas.relativePan(delta);
      // this.canvasTo = {
      //   x: 0,
      //   y: 0,
      //   zoom: this.zoom
      // }
    },

    // 弹框
    doHandleBtn (type) {
      if ('isCloseAll' != type) {
        this.currentButton = type === this.currentButton ? '' : type
      }
      this.currentBgButton = ''
      switch (type) {
        case 'isShowSelect':
          // 颜色画板
          this.isShowSelect = !this.isShowSelect
          this.isShowNumberBg = false
          this.isShowDiceBg = false
          this.isShowChartBg = false
          this.disSelectAll()
          this.stopAll()
          this.optHandler('line')
          break
        case 'isRubber':
          // 橡皮檫
          this.disSelectAll()
          this.doHandleBtn('isCloseAll')
          this.optHandler('clear')
          break
        case 'isNarrow':
          // 缩小
          this.stopAll()
          this.doHandleBtn('isCloseAll')
          this.doNarrowDom()
          break
        case 'isEnlarge':
          this.stopAll()
          this.doHandleBtn('isCloseAll')
          this.doEnlargeDom()
          break
        case 'isDrag':
          // 拖拽
          this.stopAll()
          this.doHandleBtn('isCloseAll')
          this.disSelectAll()
          this.stopDrawListen()
          this.startMoveListen()
          break
        case 'isStopAll':
          // 还原
          this.stopAll()
          this.allowSelectAll()
          this.doHandleBtn('isCloseAll')
          break
        case 'isShowChartBg':
          // 图形
          this.isShowChartBg = !this.isShowChartBg
          this.isShowDiceBg = false
          this.isShowNumberBg = false
          this.isShowSelect = false
          this.allowSelectAll()
          break
        case 'isShowDiceBg':
          // 骰子
          this.isShowDiceBg = !this.isShowDiceBg
          this.isShowChartBg = false
          this.isShowNumberBg = false
          this.isShowSelect = false
          this.allowSelectAll()
          break
        case 'isShowNumberBg':
          // 数字
          this.isShowNumberBg = !this.isShowNumberBg
          this.isShowDiceBg = false
          this.isShowChartBg = false
          this.isShowSelect = false
          this.allowSelectAll()
          break
        case 'isCloseAll':
          // 关闭全部
          this.isShowNumberBg = false
          this.isShowDiceBg = false
          this.isShowChartBg = false
          this.isShowSelect = false
          this.isEnlarge = false
          break
      }
    },
    // 播放音频
    doPlayAudio (src) {

    },
    // 下一页
    doNextPage () {
      this.doHandleBtn('')
      this.clearStorage()
      if (this.currentPagesNum < (this.pagesLength - 1)) {
        this.$router.push({
          path: '/preview',
          query: { bookId: this.bookId, currentPagesNum: this.currentPagesNum + 1 }
        })
      } else {
        this.$router.push({
          path: '/preview',
          query: { bookId: this.bookId, currentPagesNum: 0 }
        })
      }

    },
    // 上一页
    doPrevPage () {
      this.doHandleBtn('')
      this.clearStorage()
      if ((this.currentPagesNum - 1) >= 0) {
        this.$router.push({
          path: '/preview',
          query: { bookId: this.bookId, currentPagesNum: this.currentPagesNum - 1 }
        })
      } else {
        this.$router.push({
          path: '/preview',
          query: { bookId: this.bookId, currentPagesNum: this.pagesLength - 1 }
        })
      }
    },
    doFullScreen () {
      this.doHandleBtn('isCloseAll')
      ipcRenderer.send('master-maximize')
    },
    doClose () {
      this.doHandleBtn('isCloseAll')
      ipcRenderer.send('master-before-close')
    },
    goHome () {
      this.doHandleBtn('isCloseAll')
      this.$router.push({ path: '/indexPage' })
    },
    goBack () {
      this.doHandleBtn('isCloseAll')
      this.$router.push({
        path: '/preview',
        query: { bookId: this.bookId, currentPagesNum: this.currentPagesNum }
      })
    },
    colorChange () {
      this.optHandler('line')
      console.log('this.color-------------> ', this.color)
    }
  }
};
</script>

<style lang="scss">
.t-page-big {
  background-image: url("../../assets/imgs/preview/bg.png");
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  .left-box {
    background: #b5ddff;
    height: 100%;
    width: 11.5%;
    font-size: 0;
    padding-top: 2.3%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .logo {
      width: 110%;
      height: auto;
    }
    .left-main-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: start;
      flex-wrap: wrap;
      width: 100%;
      // padding: 0 25%;
      box-sizing: border-box;
      div {
        width: 100%;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      img {
        display: block;
        width: 50%;
        height: auto;
      }
      .item-hover:hover {
        width: 55%;
      }
    }
    .version {
      width: 70%;
      height: auto;
      margin: 0 auto;
      padding-bottom: 10%;
    }
  }
  .right-box {
    flex: 1;
    // padding: 1% 4% 0 2%;
    position: relative;
    .close-button {
      position: absolute;
      top: 4%;
      right: 3%;
      width: 6%;
      height: auto;
      display: block;
      z-index: 80;
    }
    .close-button:hover {
      width: 6.5%;
    }
    .canvas-box {
      position: absolute;
      width: 100%;
      height: 90%;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .answer {
      position: absolute;
      width: 3%;
      top: 4%;
      z-index: 2;
    }
    .answer:hover {
      width: 3.2%;
    }
    .sound {
      width: 2%;
      position: absolute;
      z-index: 2;
    }
    .sound:hover {
      width: 2.2%;
    }
    .catalogue {
      position: absolute;
      width: 14.2%;
      height: 2%;
      z-index: 2;
      // background: red;
      // opacity: 0.5;
    }
    .catalogue:hover {
      border: 2px solid #f5c45b;
      // background: #f5c45b;
      opacity: 0.5;
    }

    .handle-box {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      bottom: 2%;
      width: 85%;
      height: 5.6%;
      background: #fff;
      border-radius: 20px;
      border: 2px solid #bcb193;
      padding: 0 3%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 16;
      .handle-item {
        width: 5.6%;
        transform: translateY(-25%);
        position: relative;
        img {
          width: 100%;
          height: auto;
          display: block;
        }
        .handle-item-hover {
          display: none;
          width: 100%;
          text-align: center;
          font-size: 1vw;
          position: absolute;
          top: -40%;
          color: #666;
          background: #fff;
          border-radius: 20%;
          opacity: 0.7;
        }
      }
      .handle-item:hover .handle-item-hover {
        display: block;
      }
      .activity {
        width: 7%;
      }
      .page-content {
        width: 15%;
        height: 90%;
        border: 2px solid #00257a;
        background: #fff;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          font-size: 2.5vw;
          color: #00257a;
          font-weight: 600;
        }
      }
    }
    .dialog-item {
      width: 24.5%;
      height: 33%;
      position: absolute;
      top: 55%;
      z-index: 16;
      .c-close {
        position: absolute;
        top: -5%;
        right: -5%;
        width: 10%;
        height: 12%;
      }
    }
    .chart1 {
      background-image: url("../../assets/imgs/common/chartBg1.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .chart2 {
      background-image: url("../../assets/imgs/common/chartBg2.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .chart {
      left: 57%;
      box-sizing: border-box;
      padding: 1.3% 1.25%;
      padding-right: 0.5%;
      display: flex;
      flex-wrap: wrap;
      .chart-item {
        margin-right: 2.001%;
        margin-bottom: 6.8%;
        width: 23%;
        height: 17%;
        // background: red;
        // opacity: 0.5;
      }
      .next-or-chart {
        position: absolute;
        bottom: 12%;
        right: 18%;
        width: 15%;
        height: 15%;
        // background: red;
        // opacity: 0.5;
      }
      .chart-item-activity {
        border-radius: 1vw;
        background: red;
        opacity: 0.4;
      }
    }
    .dice {
      left: 63.5%;
      background-image: url("../../assets/imgs/common/diceBg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      box-sizing: border-box;
      padding: 3% 2.2%;
      padding-right: 1.8%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .dice-item {
        margin-right: 0.5%;
        margin-bottom: 7.5%;
        width: 31%;
        height: 23.5%;
      }
      .dice-item-activity {
        border-radius: 1vw;
        background: red;
        opacity: 0.4;
      }
    }
    .number {
      left: 70.5%;
      background-image: url("../../assets/imgs/common/numberBg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 0.8% 1.8%;
      padding-right: 1.5%;
      padding-bottom: 2.6%;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .number-item {
        margin-bottom: 6.7%;
        width: 28%;
        height: 20%;
        // background: red;
        // opacity: 0.5;
      }
      .number-item-activity {
        border-radius: 1vw;
        background: red;
        opacity: 0.4;
      }
    }
  }
}
</style>
